<template>
    <div class="content">
        <h1 style="font-size: 2rem;text-align: center;color: #000;">质量缺陷排查统计表</h1>
        <el-row >
            <el-col :span="24">
                <el-button type="primary" :icon="CirclePlus" @click="onEdit(0)">添加</el-button>
            </el-col>
        </el-row>
        <div class="mt20"><el-text>{{ project.title }}</el-text></div>
        <el-table class="mt20" :data="tableData" border v-loading="form.loading" style="width: 100%;font-size: 16px;">
            <el-table-column type="index" :index="indexMethod" label="序号" width="60" align="center" />
            <el-table-column prop="title" label="现场存在质量缺陷" show-overflow-tooltip />
            <el-table-column label="隐患照片" align="center">
                <template #default="scope" >
                    <div><el-image style="width: 60px; height: 60px" :src="scope.row.description" /></div>
                    <el-text>发现问题时间:{{ scope.row.description_date }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="整改后照片"  align="center">
                <template #default="scope">
                    <div><el-image style="width: 60px; height: 60px" :src="scope.row.rectification" /></div>
                    <el-text>整改完成时间:{{ scope.row.rectification_date }}</el-text>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120" align="center">
                <template #default="scope">
                    <el-button link type="primary" @click="onEdit(scope.$index)" size="small">编辑</el-button>
                    <el-popconfirm title="确定要删除么?" @confirm="onDelete(scope.row.id)">
                        <template #reference>
                            <el-button link type="danger" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <el-dialog v-model="isEdit" title="现场存在质量缺陷" width="80%">
        <component :is="hazardForm" :data = editId :type = form.type @onSave="onSave" />
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import { CirclePlus } from '@element-plus/icons-vue'
import hazardForm from '@/components/hazardForm.vue';
import { ElMessage } from 'element-plus'
import http from '../../../../util/request';
const indexMethod = (index: number) => {
  return index+= 1
}
let project:any = sessionStorage.getItem('project')
project = JSON.parse(project);
const form = ref<any>({type:'disclosure'})
const isEdit = ref<boolean>(false)
interface info {
    id: number
    title: string
    created_at: string
}
const editId = ref<number>(0)
const tableData = ref<info[]>([])

const onGetData = () => {
    
    form.value.loading = true
    http.post('/hazard',form.value).then((response:any)=>{
        form.value.loading = false
        tableData.value = response.data.data
        form.value.total = response.data.total
    })
}

const onEdit = (data: number) => {
    editId.value = data
    isEdit.value = true
}


const onSave = () => {
    onGetData()
    isEdit.value = false
}

const onDelete = (id: number) => {
    http.delete('/hazard/'+id).then((response:any)=>{
        if(response.data.code != 200){
            ElMessage.error(response.data.msg);return;
        }
        ElMessage.success(response.data.msg);
        onGetData();
    })
}

onMounted(()=>{
    onGetData()
})

</script>

<style scoped>

</style>